<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title></title>
    <script src="js/mui.min.js"></script>
    <script src="js/navbar.js" type="text/javascript" charset="utf-8"></script>
    <script src="js/articleList.js"></script>
    <script src="js/cardList.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <link href="css/navBar.css" rel="stylesheet"/>
    <link href="css/card.css" rel="stylesheet">
    <script type="text/javascript" charset="utf-8">
        function load() {
            console.log('----------');

        }

        mui.init(
            {
            preloadPages:[{
                id:'articleDetail.html',
                url:'articleDetail.html'
            }],
            pullRefresh: {
                container: 'list-card',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
                up: {
                    height: 50,//可选.默认50.触发上拉加载拖动距离
                    auto: true,//可选,默认false.自动上拉加载一次
                    contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
                    contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
                    callback: load //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
                }
            }
        }
        );


    </script>
    <style type="text/css">
        .top-btn {
            padding-top: 0.3125rem;
            font-size: .8rem;
            line-height: 1.5rem;
            display: flex;
            justify-content: space-around;
            border-bottom: .1rem solid rgb(214, 228, 221);
        }

        .top-btn .item {
            width: 3rem;
            text-align: center;
            position: relative;

        }

        .top-btn .item .bottom-border {
            position: absolute;
            width: 90%;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            /* border-bottom: 0.0825rem solid #007AFF; */
        }

        .top-btn .item.active .bottom-border {
            border-bottom: 0.0825rem solid #007AFF;
        }

        .top-btn .active {
            color: #007AFF;
        }

        .header-bar {
            background-color: #efeff4;
            display: flex;
        }

        .login-btn {
            font-size: 1rem;
            line-height: 2.5rem;
        }

        .login-btn:hover {
            color: #007AFF;
        }

        /*//文章列表*/
        .article-content .origin {
            font-size: 14px;
            color: #8f8f94;
        }

        .mui-table-view-cell {
            padding: 0.6875rem 0.9375rem 0.3125rem;
        }
    </style>
</head>
<body>
<header class=" header-bar mui-bar mui-bar-nav">
    <div class="login-btn">登录</div>
    <div class="mui-input-row mui-search" style="width: 70%;margin-left: 1rem;">
        <input type="search" class="mui-input-clear" placeholder="">
    </div>
    <span class="mui-icon mui-icon-plus" style="margin-left: .1rem;"></span>
</header>
<div class="mui-content content-body">
    <div class="top-btn">
        <div class="item active" index="1">
            <span>关注</span>
            <div class="bottom-border"></div>
        </div>
        <div class="item" index="2">
            <span>推荐</span>
            <div class="bottom-border"></div>
        </div>
        <div class="item" index="3">
            <span>视频</span>
            <div class="bottom-border"></div>
        </div>
        <div class="item" index="4">
            <span>新闻</span>
            <div class="bottom-border"></div>
        </div>
        <div class="item" index="5">
            <span>热榜</span>
            <div class="bottom-border"></div>
        </div>
    </div>
    <div class="article-content">
    </div>
    <div class="list-card">
    </div>
</div>
<div id="navbar" style="width: 100%;"></div>
<script type="text/javascript">
        mui.plusReady(function () {
        // 初始化底部按钮
        window.navbarOptions.init('#navbar', mui, 0)
        mui('.top-btn').on('tap', '.item', function (event) {
            //给item加index属性用来区分点击时到底是哪一个
            var index = this.getAttribute('index')
            //先把所有的item选出来 去掉活跃再给当前加上活跃
            var list = mui('.top-btn>.item')
            for (var i = 0; i < list.length; i++) {
                list[i].setAttribute('class', 'item')
            }
            articleCreate('.article-content',mui,index-1)
            cardCreate('.list-card', mui, index-1)
            this.setAttribute('class', 'item active')
        })
        articleCreate('.article-content',mui)
        cardCreate('.list-card', mui, 0)
    })
    // window.onload = function () {
    //     // 初始化底部按钮
    //     window.navbarOptions.init('#navbar', mui, 0)
    //     mui('.top-btn').on('tap', '.item', function (event) {
    //         //给item加index属性用来区分点击时到底是哪一个
    //         var index = this.getAttribute('index')
    //         //先把所有的item选出来 去掉活跃再给当前加上活跃
    //         var list = mui('.top-btn>.item')
    //         for (var i = 0; i < list.length; i++) {
    //             list[i].setAttribute('class', 'item')
    //         }
    //         articleCreate('.article-content',mui,index-1)
    //         cardCreate('.list-card', mui, index-1)
    //         this.setAttribute('class', 'item active')
    //     })
    //     articleCreate('.article-content',mui)
    //     cardCreate('.list-card', mui, 0)
    // }
</script>
</body>
</html>
